<template>
  <div ref="boxwrap" class="ProductFeatures">
    <el-row :gutter="0">
      <el-col :span="12">
        <div :id="id" class="chart" />
      </el-col>
      <el-col :span="12">
        <el-table
          :data="tableData"
          size="small "
          :height="chartStyle.height"
          style="width: 100%"
          :header-cell-style="cellStyle"
          :cell-style="cellStyle"
        >
          <el-table-column
            prop="paramName"
            label=""
            min-width="45"
          />
          <el-table-column
            prop="lineA"
            label="A线"
            min-width="45"
          />
          <el-table-column
            prop="lineB"
            label="B线"
            min-width="45"
          />
          <el-table-column
            prop="unit"
            label="单位"
            min-width="45"
          />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import resize from '@/components/Charts/mixins/resize'
export default ({
  name: 'ProductFeatures',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '150px'
    },
    height: {
      type: String,
      default: '150px'
    },
    isresize: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: 'Radar',
      chart: null,
      chartStyle: {
        width: '100%',
        height: '100%'
      },
      colors: ['rgba(89,224,1,1)', 'rgba(158,58,226,1)'],
      colorsTrans: ['rgba(89,224,1,0.2)', 'rgba(158,58,226,0.2)'],
      cellStyle: { 'border-bottom-width': '0', 'padding': 0 },
      tableData: [{
        paramName: '板厚',
        lineA: '0.4',
        lineB: '12',
        unit: 'mil'
      }, {
        paramName: '铜厚',
        lineA: '0.4',
        lineB: '1.6',
        unit: 'mil'
      }, {
        paramName: '线宽',
        lineA: '2',
        lineB: '10',
        unit: 'mil'
      }, {
        paramName: '线距',
        lineA: '2',
        lineB: '10',
        unit: 'mil'
      }, {
        paramName: '尺寸',
        lineA: '16',
        lineB: '24',
        unit: 'inch'
      }],
      currentView: {}
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'regionid',
  //     'lineId'
  //   ])
  // },
  watch: {
    width: {
      immediate: true,
      handler: function(newval, oldval) {
        this.width = newval
      },
      deep: true
    },
    height: {
      immediate: true,
      handler: function(newval, oldval) {
        this.height = newval
      },
      deep: true
    },
    isresize(newval, oldval) {
      this.movement = newval
      this.chart.resize()
    }
  },
  mounted() {
    this.getDomHeight()
    this.domResize()
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.getCurrentView()
  },
  methods: {
    getDomHeight() {
      this.chartStyle = {
        width: this.$refs.boxwrap.clientWidth / 2 + 'px',
        height: this.$refs.boxwrap.clientHeight + 'px'
      }
    },
    domResize() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        var width = element.clientWidth / 2 + 'px'
        var height = element.clientHeight + 'px'
        that.chartStyle = {
          width,
          height
        }
      })
    },
    getCurrentView() {
      this.currentView = {
        regionid: this.$Cookies.get('currentReginid'),
        lineId: this.$Cookies.get('currentLineId')
      }
      this.getData()
    },
    getData() {},
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.id), 'jyt-dark')
      this.chart.setOption({
        tooltip: {
          confine: true
        },
        radar: {
          // color: this.colors,
          center: ['50%', '55%'],
          radius: '70%',
          startAngle: 90,
          splitNumber: 3,
          axisName: {
            formatter: '{value}',
            fontSize: 14, // 外圈标签字体大小
            color: '#bebebe' // 外圈标签字体颜色
          },
          axisNameGap: 5,
          splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: { // 分隔区域的样式设置。
              color: ['rgba(14,34,80,0.1)', 'rgba(14,34,80,0.1)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: { // 指向外圈文本的分隔线样式
            lineStyle: {
              color: '#43557e'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#43557e', // 分隔线颜色
              width: 1 // 分隔线线宽
            }
          },
          indicator: [
            { name: '板厚', max: 25 },
            { name: '铜厚', max: 25 },
            { name: '线宽', max: 25 },
            { name: '线距', max: 25 },
            { name: '尺寸', max: 25 }
          ]
        },
        series: [{
          name: '参数状态',
          nameGap: 2,
          type: 'radar',
          data: [
            {
              value: [0.4, 0.4, 2, 3, 16],
              name: 'A线',
              itemStyle: {
                color: this.colors[0]
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0, // 右
                  y: 0, // 下
                  x2: 1, // 左
                  y2: 1, // 上
                  colorStops: [{
                    offset: 0,
                    color: this.colors[0]
                  }, {
                    offset: 0.5,
                    color: this.colorsTrans[0]
                  }, {
                    offset: 1,
                    color: this.colorsTrans[0]
                  }],
                  globalCoord: false
                },
                opacity: 1 // 区域透明度
              },
              symbolSize: 1
            },
            {
              value: [12, 1.6, 10, 10, 24],
              name: 'B线',
              itemStyle: {
                color: this.colors[1]
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0, // 右
                  y: 0, // 下
                  x2: 1, // 左
                  y2: 1, // 上
                  colorStops: [{
                    offset: 0,
                    color: this.colors[1]
                  }, {
                    offset: 0.5,
                    color: this.colorsTrans[1]
                  }, {
                    offset: 1,
                    color: this.colorsTrans[1]
                  }],
                  globalCoord: false
                },
                opacity: 1 // 区域透明度
              },
              symbolSize: 1
            }
          ]
        }]
      })
    }
  }
})
</script>
<style lang="scss">
.chart{
  width: 100%;
  height: 100%;
}
.ProductFeatures{
  .el-row{
    width: 100%;
    height: 100%;

    .el-col{
      width: 50%;
      height: 100%;
    }
  }
    .el-table::before {
    height: 0;
  }

  .el-table th{
    background-color: transparent;
  }
}

</style>
